// 实现这个项目的构建任务
// const sass = require('gulp-sass');
// const babel = require('gulp-babel');
// const swig = require('gulp-swig')
// const imagemin = require('gulp-imagemin')

const {src, dest, series, parallel, watch} = require('gulp');


const del = require('del');
const browserSync = require('browser-sync');
const loadPlugins =require('gulp-load-plugins');
const plugins = loadPlugins(); // 自动加载所有gulp插件


const bs = browserSync.create()


// 样式处理
const style = () => {
  return src('src/assets/styles/*.scss', {base: 'src'})
    .pipe(plugins.sass({outputStyle: 'expanded'}))
    .pipe(dest('dist'))
    .pipe(bs.reload({stream: true}))//reload代替files更新作用
}


// js处理
const script = () =>{
  return src('src/assets/scripts/*.js', {base: 'src'})
    .pipe(plugins.babel({ presets: ['@babel/preset-env']}))
    .pipe(plugins.rename({ extname: '.min.js'}))
    .pipe(dest('dist'))
    .pipe(bs.reload({stream: true}))
}


// html处理
const page = () => {
  return src(['src/*.html', 'src/layouts/*.html', 'src/partials/*.html'], {base: 'src'})
    .pipe(plugins.swig({defaults: {cache: false}}))
    .pipe(dest('dist'))
    .pipe(bs.reload({stream: true}))
}


//图片处理
const image = () => {
  return src('src/assets/images/**', {base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}


// 文字处理
const font = () => {
  return src('src/assets/fonts/**', {base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}


const extra = () => {
  return src('public/**', {base: 'public'})
    .pipe(dest('dist'))
}


const clean = () => {
  return del(['dist'])
}


const serve = () => {
  watch('src/assets/styles/*.scss', style)
  watch('src/assets/scripts/*.js', script)
  watch(['src/*.html', 'src/layouts/*.html', 'src/partials/*.html'], page)
  //开发阶段，监控静态资源没有意义

  //监控静态资源变化，文件自动更新到浏览器
  watch(['src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'], bs.reload)

  bs.init({
    notify: false,
    port: 2021,
    files: 'dist/**',//文件更新后浏览器自动刷新
    server: {
      baseDir: ['dist', 'src', 'public'],//网站根目录,找不到，则按数组顺序向后查找
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

//替换注释搜索路径
const useref = () => {
  return src(['dist/*.html', 'dist/layouts/*.html', 'dist/partials/*.html'], {base: 'dist'})
    .pipe(plugins.useref({searchPath: ['dist', '.']}))
    .pipe(plugins.if(/\.js$/, plugins.uglify()))//文件压缩
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    })))//压缩空白行和换行符
    .pipe(dest('dist'))//修改写入流
}


const lint = () => {
  return src('src/assets/scripts/*.js', {base: 'src'})
    .pipe(bs.reload({stream: true}))
    .pipe(plugins.eslint.format())
    .pipe(plugins.eslint.failAfterError())
}


const deployPages = () => {
  return src('./dist/**/*')
    .pipe(plugins.ghPages(//发布到github网站配置有些问题
      {//发布到github网站
        remoteUrl: 'https://github.com/SelenaWong/pages-boilerplate.git',
        branch: 'master'
      }
    ))
}


const compile = parallel(style, script, page)
const build = series(clean, parallel(series(compile, useref), image, font, extra))
const start = series(compile, serve)
const deploy = series(build, deployPages)


module.exports = {
  build,
  clean,
  start,
  serve,
  deploy,
  lint
}
